<template>
    <el-form ref="formRef" :model="form" labelWidth="120px" label-suffix="：">
        <el-steps :active="active">
            <template v-for="(step, index) in steps" :key="index">
                <el-step>
                    <template #title>
                        <span class="step-title" @click="active = step.value">{{ step.title }}</span>
                    </template>
                </el-step>
            </template>
        </el-steps>

        <div v-show="active === 1" class="step1">
            <el-form-item label="节点名称">
                <el-input v-model="form.nodeName"></el-input>
            </el-form-item>
            <el-form-item label="节点ID">
                <el-input v-model="form.typeConcatName" disabled></el-input>
            </el-form-item>
            <dialog-footer @ok="submitForm" @cancel="cancel" ok-text="保存">
                <el-button type="success" @click="active = 2">下一步</el-button>
            </dialog-footer>

        </div>

        <div v-show="active === 2" class="step2">
            <el-form-item label="字段">
                <div style="margin-bottom: 10px;">
                    <el-button
                        type="primary"
                        size="small"
                        @click="addField"
                    >新增字段</el-button>
                    <el-button
                        type="danger"
                        size="small"
                        @click="batchDelete"
                        :disabled="selectedRows.length === 0"
                    >删除选中</el-button>

                </div>
                <el-table :data="form.fields.field" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="30"/>
                    <el-table-column prop="name" label="名称" width="150">
                        <template #default="scope">
                            <el-input v-model="scope.row.name" placeholder="请输入字段名称"/>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" label="类型" width="180">
                        <template #default="scope">
                            <el-select v-model="scope.row.type" placeholder="请选择字段类型">
                                <el-option v-model="scope.row.type"
                                           v-for="item in typeList"
                                           :key="item.dictValue"
                                           :label="item.dictLabel"
                                           :value="item.dictValue"/>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120">
                        <template #default="scope">
                            <el-button
                                type="danger"
                                size="small"
                                @click="deleteField(scope.$index)"
                            >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <dialog-footer @ok="submitForm" @cancel="cancel" ok-text="保存">
                <el-button type="success" @click="active = 1">上一步</el-button>
            </dialog-footer>
        </div>
    </el-form>

</template>

<script setup>
import {defineComponent, ref, onMounted, reactive, watch} from 'vue';
import {flowServiceStore} from '@data/store/flow';

const flowCount = flowServiceStore();
import {storeToRefs} from 'pinia';
import {ElMessage} from "element-plus";
import { getDicts } from '@base/api/base/dict/data'

const {flowData} = storeToRefs(flowCount);

defineComponent({
    name: 'SystemInfo',
});

const steps = ref([
    { value: 1, title: '基础属性' },
    { value: 2, title: '字段信息' }
]);
const active = ref(1);

const props = defineProps({
    detailObject: {
        type: Object,
        default: () => {
        },
    },
})
const loading = ref(false);

const form = reactive({
    nodeName: '',
    name: '',
    type: 'SystemInfo',
    copies: 1,
    distribute: 'Y',
    fields: {
        field: [
            {
                name: '',
                type: '',
            }
        ]
    },

    GUI: {
        xloc: 1,
        yloc: 1,
        draw: 'Y'
    }
});

const emit = defineEmits(['cancel']);

onMounted(() => {
    getTypeList();
    form.nodeName = flowData.value[props.detailObject.id]?.nodeName || props.detailObject.data.label;
    form.name = props.detailObject.id;
    form.typeConcatName = `${props.detailObject.id}(${form.type}-${props.detailObject.id})`;
    form.fields = flowData.value[props.detailObject.id]?.fields ||
        {
            field:[]
        };

    form.distribute = flowData.value[props.detailObject.id]?.distribute || 'Y';

})

const typeList = ref([]);
const getTypeList= () => {
    getDicts('data_sys_varinfo').then((response) => {
        typeList.value = response.data
        console.log(typeList.value)
    })
};

const selectedRows = ref([])
// 处理选择变化
const handleSelectionChange = (val) => {
  selectedRows.value = val
}
// 批量删除方法
const batchDelete = () => {
  if (selectedRows.value.length === 0) return
  const indexes = selectedRows.value.map(row =>
      form.fields.field.indexOf(row)
  ).sort((a,b) => b - a)
  indexes.forEach(index => {
    form.fields.field.splice(index, 1)
  })
  selectedRows.value = []
}

// 新增字段方法
const addField = () => {
    form.fields.field.push({
        name: '',
        type: '',
    });
}

// 修改删除方法（已存在的方法需要修改）
const deleteField = (index) => {
    form.fields.field.splice(index, 1);
}

const submitForm = () => {
    form.fields.field.forEach(fieldItem => {
      form.fieldList.push(fieldItem);
    });
    flowCount.setFlowData(
        {
            ...flowData.value,
            [props.detailObject.id]: {
                ...form,
                name: `${form.type}-${form.name}`,
            }
        }
    )
  // 触发数据更新事件

    console.log(flowData.value);
    emit('cancel');

}
const cancel = () => {
  emit('cancel');
}

const toReader = () => {

}

const parseSql = () => {
}

</script>

<style scoped>

</style>